<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>
    /* 
      伪类，表示元素的某种状态
        语法：
            选择器:状态{

            }
    */
    /* 
    a链接的四种状态:      
      :link   a链接未访问时的状态，默认蓝色下划线
      :visited  a链接访问过后的状态，默认紫色下划线
      :hover   划过默认无样式 （所有的元素都可以hover）
      :active   a链接点击时(鼠标按住)，默认红色下划线

      注意: a链接设置4种状态样式时需要按照 l-v-h-a的顺序设置
    */
    a:link {
      color: orange;
    }
    a:visited{
      color: #ccc;
    }
    a:hover{
      color: red;
    }
    a:active{
      color: darkturquoise;
    }
  </style>
  <a href="#">a链接</a>

  <style>
/* 
      : foucs ,获取焦点时的状态

*/
    .username{
      width: 100px;
      height: 21px;
      box-sizing: border-box;
    }
    .username:focus{
      border:1px  solid #66AFE9;
      outline: none;
      /* 圆角 */
      border-radius: 2px;
    }
  </style>
  <input type="text" class="username">

  <style>
    /* 
      disabled，控件禁用时的状态
    */
    .login:disabled{
      /* 鼠标变成禁用样式 */
      cursor: not-allowed;
    }
  </style>
  <button class="login" disabled>登录</button>

  <style>
  /* 
    :first-child,匹配第一个元素
  */
  .box :first-child{
    color: red;
  }
  /* 
    :last-child,匹配最后一个元素
  */
  .box > :last-child{
    color: orange;
  }
  /* 
    :nth-child(n)，通过索引值来匹配,n表示索引值
  */
  .box > :nth-child(4){
    color: aqua;
  }
  /* 
    :nth-last-child(n)，通过索引值来匹配,n表示索引值，顺序和:nth-child()相反
  */
  .box > :nth-last-child(4){
    color: deeppink;
  }
  </style>
  <div class="box">
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
    <p>段落5</p>
  </div>

  <style>
    /* 
      :checked ,单选按钮和多选选中时的状态
    */
    input[type="radio"]:checked + span{
      color: red;
    }
  </style>
  <div class="btn1">
      <input type="radio" name="gender">
      <span>男</span>
  </div>
  <div class="btn2">
      <input type="radio" name="gender">
      <span>女</span>
  </div>

  <style>
    /* 
      :not(xx) ,匹配除了xx选择器之外的元素
    */
    .box2 > :not(:first-child){
      color: pink;
    }
    /* .box2 > :not(.active){
      color: orange;
    } */
  </style>
  <div class="box2">
    <p>段落1</p>
    <p>段落2</p>
    <p class="active">段落3</p>
    <p>段落4</p>
    <p>段落5</p>
  </div>


</body>
</html>